<!-- 热门景区排行榜 -->
<template>
  <div class="ranking_content">
    <div class="top">
      <div>热门景区排行</div>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="bom">
      <!-- 顶部的部分 -->
      <div class="title">
        <span class="one">排名</span>
        <span class="two">景区</span>
        <span class="three">预约数量</span>
      </div>

      <!-- 数据展示部分 -->
      <!-- 滚动 -->
      <el-scrollbar class="scroll">
        <div class="show_data">
          <ScenicItem
            :itemData="item"
            v-for="(item, index) in scenicArr"
            :key="index"
          ></ScenicItem>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import ScenicItem from "./ScenicItem.vue";
//景区数据
let scenicArr = [
  {
    //排行榜
    ranking: "NO1",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 30,
    //进度条颜色
    color: "#f56c6c",
  },
  {
    //排行榜
    ranking: "NO2",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 30,
    //进度条颜色
    color: "#e6a23c",
  },
  {
    //排行榜
    ranking: "NO3",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 70,
    //进度条颜色
    color: "#5cb87a",
  },
  {
    //排行榜
    ranking: "NO4",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 60,
    //进度条颜色
    color: "#1989fa",
  },
  {
    //排行榜
    ranking: "NO5",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 40,
    //进度条颜色
    color: "#6f7ad3",
  },
  {
    //排行榜
    ranking: "NO6",
    //景区名称
    name: "峨眉山",
    //预约总量
    total: 10000,
    //实际数量
    realNum: 3000,
    //百分比
    present: 50,
    //进度条颜色
    color: "#E65E45",
  },
];
</script>

<style lang="scss" scoped>
.ranking_content {
  display: flex;
  flex-direction: column;
  .top {
    margin-left: 14px;
    color: white;
    font-size: 16px;
    margin-top: 10px;
    img {
      width: 68px;
      height: 7px;
    }
  }

  .bom {
    flex: 1;
    display: flex;
    flex-direction: column;

    .title {
      margin-top: 30px;
      height: 40px;
      display: flex;
      line-height: 40px;
      color: #e3a251;

      .one {
        flex: 1;
        text-align: center;
      }
      .two {
        flex: 1;
        text-align: center;
      }
      .three {
        flex: 3;
        text-align: center;
      }
    }

    .scroll {
      height: 260px;
      .show_data {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
